<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="staffAdd">新增</el-button>
      </el-col>
      <right-toolbar :search="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="tableList">
      <el-table-column label="所属机构" align="center" prop="orgName" :show-overflow-tooltip="true" />
      <el-table-column label="角色名称" align="center" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="角色描述" align="center" prop="descStr" :show-overflow-tooltip="true" />
      <el-table-column label="添加时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="权限设置" placement="top">
            <el-button link type="primary" icon="setting" @click="handlePreview(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="编辑" placement="top">
            <el-button link type="primary" icon="Edit" @click="handleEditTable(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page_count" v-model:limit="queryParams.page_size" @pagination="getList" />
    <!-- 预览界面 -->
    <el-dialog :title="preview.title" v-model="preview.open" width="50%" append-to-body class="scrollbar" @opened="setCheckedKeys">
      <el-container style="height: 400px">
        <el-scrollbar height="400px">
          <el-aside width="200px">
            <div class="title">机构管理</div>
            <div class="pd-5">
              <el-input v-model="input1" placeholder="请输入关键词" :prefix-icon="Search" />
            </div>
            <div class="pd-5">
              <el-tree ref="treeRef" :data="state.data" node-key="id" :props="defaultProps" @node-click="handleNodeClick" default-expand-all :highlight-current="true" /></div
          ></el-aside>
        </el-scrollbar>

        <el-main>
          <el-affix :offset="120">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize" status-icon>
              <el-form-item label="角色名称" prop="name">
                <el-input v-model="ruleForm.name" />
              </el-form-item>
              <el-form-item label="角色描述" prop="text">
                <el-input v-model="ruleForm.text" type="textarea" placeholder="请输入内容" />
              </el-form-item>
              <el-form-item>
                <el-row :gutter="20">
                  <el-button type="primary" :span="6" :offset="6" @click="btnConfirm"> 确定</el-button>
                  <el-button :span="6" :offset="6" @click="btnCancel"> 取消</el-button></el-row
                >
              </el-form-item>
            </el-form>
          </el-affix>
        </el-main>
      </el-container>
    </el-dialog>
  </div>
</template>

<script setup name="Gen">
import { Search } from "@element-plus/icons-vue";
// import { reactive, ref, nextTick } from "vue";
import { queryRoleList, modify, addRole, delRole, getDetail, setPermis } from "@/api/role";
import { queryOrgTree } from "@/api/org";
import { onMounted } from "vue";
import { ElMessageBox, ElTree } from "element-plus";

const treeRef = ref();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const formSize = ref("default");
const tableList = ref([]);
const loading = ref(false);
const showSearch = ref(false);
const total = ref(0);
const dateRange = ref([]);
const uniqueId = ref("");
const input1 = ref("");
const data = reactive({
  queryParams: {
    page_count: 1,
    page_size: 10,
    tableName: undefined,
    tableComment: undefined,
  },
  preview: {
    open: false,
    title: "添加角色",
    data: {},
    activeName: "domain.java",
  },
});
const ruleForm = reactive({
  text: "", //描述
  name: "", //名称
  id: "", //id
  orgId: "", //orgId
  orgPkId: "", //当前机构ID
  type: "", //类型/ 1- 编辑or 2- 添加
});

const state = reactive({
  data: [],
  list: [],
});

const defaultProps = {
  children: "childs",
  label: "orgName",
};

const rules = reactive({
  text: [{ required: true, message: "请填写角色描述", trigger: "blur" }],
  name: [
    {
      required: true,
      message: "请填写角色名称",
      trigger: "blur",
    },
  ],
});

//查看详情
function getDetails(id) {
  console.log(id, "ididiidid");
  getDetail(id).then((res) => {
    console.log(res, "resresres查看详情");
  });
}

const { queryParams, preview } = toRefs(data);
onMounted(() => {});
//当前选中树节点
function setCheckedKeys() {
  if (ruleForm.type == "2") {
    return;
  }
  setTimeout(() => {
    treeRef.value.setCurrentKey(ruleForm.orgPkId, true);
  }, 100);
}

//查全部机构树
function getOrgList() {
  loading.value = true;
  queryOrgTree().then((res) => {
    console.log(res, "机构树列表");
    state.data = res;
    loading.value = false;
  });
}

// 树组件点击选中事件
const handleNodeClick = (data) => {
  console.log(data, "点击");
  ruleForm.orgId = data.orgId;
};

// 添加
function staffAdd() {
  ruleForm.name = "";
  ruleForm.text = "";
  ruleForm.id = "";
  ruleForm.orgId = "";
  ruleForm.type = "2";
  preview.value.open = true;
  preview.value.title = "添加角色";
}
//弹窗取消
function btnCancel() {
  preview.value.open = false;
}
//弹窗确定
function btnConfirm() {
  console.log(ruleForm, "ruleForm");
  if (ruleForm.type == "1") {
    modify(ruleForm.id, ruleForm.orgId, ruleForm.name, ruleForm.text).then((res) => {
      console.log(res, "res编辑");
      if (res.code !== "200") {
        ElMessage.error(res.msg);
      } else {
        getList();
      }
    });
  } else {
    addRole(ruleForm.id, ruleForm.orgId, ruleForm.name, ruleForm.text).then((res) => {
      console.log(res, "res添加");
      if (res.code !== "200") {
        ElMessage.error(res.msg);
      } else {
        getList();
      }
    });
  }

  preview.value.open = false;
  //done
}
onActivated(() => {
  const time = route.query.t;
  if (time != null && time != uniqueId.value) {
    uniqueId.value = time;
    queryParams.value.page_count = Number(route.query.page_count);
    dateRange.value = [];
    proxy.resetForm("queryForm");
  }
});

//查询角色列表
function getList(val) {
  queryRoleList(val ? val.page : 1, val ? val.limit : 10).then((res) => {
    console.log(res, "res查询角色列表");
    tableList.value = res.roles;
    total.value = res.total_page;
  });
  getOrgList();
}

//编辑
function handleEditTable(val) {
  console.log(val, "编辑");
  getDetails(val.id);
  preview.value.open = true;
  ruleForm.name = val.name;
  ruleForm.text = val.descStr;
  ruleForm.id = val.id;
  ruleForm.orgId = val.orgId;
  ruleForm.type = "1";
  ruleForm.orgPkId = val.orgPkId;
  preview.value.title = "编辑角色";
  setCheckedKeys();
}

//权限设置
function handlePreview(val) {
  console.log(val, "权限设置");
  router.push({
    path: "setting",
    query: val,
  });
}

//删除
function handleDelete(val) {
  console.log(val, "删除");
  ElMessageBox.confirm("确定删除该角色吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delRole(val.id).then((res) => {
        if (res.code == "200") {
          getList();
        } else {
          ElMessage.error(res.msg);
        }
      });
    })
    .catch(() => {});
}

getList();
</script>
<style lang="scss" scoped>
.headline {
  background-color: #f3f3f3;
  text-align: left;
  span {
    display: block;
    padding-top: 5px;
    margin-left: 5px;
  }
}
:deep(.el-overlay-dialog) {
  top: 500vh;
}
:deep(.el-aside) {
  margin: 0;
  padding: 0;
  border: 1px solid #dadbdc;
  background: #fff;
}

.title {
  height: 30px;
  line-height: 30px;
  background-color: #ebebeb;
  text-align: center;
}
.pd-5 {
  padding: 5px;
}
:deep(.el-affix) {
  width: 100% !important;
}
</style>
